<div class="buttons">
  <% if (typeof undoTransformation !== "undefined") { %>
    <button data-action="undo" class="undo">Undo <%= Helpers.formatTransformation(undoTransformation, productions, info) %></button>
  <% } %>
  
  <% if (typeof redoTransformation !== "undefined") { %>
    <button data-action="redo" class="redo">Redo <%= Helpers.formatTransformation(redoTransformation, productions, info) %></button>
  <% } %>
</div>

<table class="symbols productions">
  <% productions.forEach(function(production, i) { %>
    <tr>
      <td>
        <% production.forEach(function(symbol, j) { %>
          <% if (transformations[i][j].length > 0) { %>
            <span class="pill"><%= Helpers.formatSymbol(symbol, info) %><select><option disabled selected><%= symbol %></option><% transformations[i][j].forEach(function(t) { %><option value="<%= t.index %>"><%= Helpers.formatTransformation(t.transformation, productions, info) %></option><% }) %></select></span>
          <% } else { %>
            <%= Helpers.formatSymbol(symbol, info) %>
          <% } %>
          <% if (j === 0) { %>
            &rarr;
          <% } %>
        <% }) %>
        <% if (production.length === 1) { %>
          <u>&epsilon;</u>
        <% } %>
      </td>
    </tr>
  <% }); %>
</table>
